<template>
  <div class="wapper">
    <div @click="isShow" class="value">
      {{ text || "请选择" }}
    </div>
    <van-popup
      v-model:show="show"
      position="bottom"
      teleport="body"
      style="height: 60%"
    >
      <div class="search-wapper">
        <div class="van-picker__toolbar">
          <button type="button" class="van-picker__cancel" @click="onCancel">
            取消
          </button>
          <button type="button" class="van-picker__confirm" @click="onConfirm">
            确认
          </button>
        </div>
        <van-cell style="border-top: 1px solid #edebf0" title="全选">
          <template #right-icon>
            <van-checkbox
              name="all"
              @click="toggleAll"
              shape="square"
              v-model="checkedAll"
            />
          </template>
        </van-cell>

        <van-loading v-if="loading">加载中，请稍候...</van-loading>
        <van-cell v-else-if="searchList.length < 1">暂无匹配项</van-cell>
        <van-checkbox-group v-else v-model="checkBoxArr" ref="checkboxGroup">
          <van-cell-group>
            <van-cell
              v-for="item in searchList"
              :key="item.value"
              :title="item.text"
            >
              <template #right-icon>
                <van-checkbox
                  :name="item.value"
                  shape="square"
                  ref="checkboxes"
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { debounce } from "lodash";
import {
  Picker,
  Popup,
  Loading,
  Empty,
  Checkbox,
  CheckboxGroup,
  Cell,
  CellGroup,
  Search,
} from "vant";
export default {
  name: "BatchSelect",
  components: {
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Loading.name]: Loading,
    [Empty.name]: Empty,
    [Checkbox.name]: Checkbox,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [CheckboxGroup.name]: CheckboxGroup,
    [Search.name]: Search,
  },
  model: {
    event: "change",
  },
  props: {
    dataList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      text: "",
      columns: [],
      show: false,
      loading: false,
      text: "请选择",
      token: "",
      checkedAll: false,
      checkboxGroup: null,
      newList: [],
      checkBoxArr: [],
      searchList: [],
      inputText: "",
      emitArr: [],
    };
  },
  watch: {
    dataList(val) {
      if (val) {
        this.handleSearchInput();
      }
    },
    immediate: true,
    deep: true,
  },
  methods: {
    onConfirm() {
      var _this = this;
      _this.emitArr = [];
      let len = this.checkBoxArr.length;
      if (len > 0) {
        this.text = "已选择" + len + "项";
      } else {
        this.text = "";
      }
      this.checkBoxArr.map((item) => {
        _this.dataList.map((item1) => {
          if (item == item1) {
            _this.emitArr.push(item1);
          }
        });
      });
      this.show = false;
      this.$emit("chooseValue", _this.emitArr);
    },
    onCancel() {
      this.checkedAll = false;
      this.text = "";
      this.show = false;
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll(this.checkedAll);
      if (!this.checkedAll) {
        this.text = "";
      }
    },
    clearInput() {
      this.handleSearchInput();
    },
    isShow() {
      this.show = true;
    },
    handleSearchInput() {
      var _this = this;
      _this.newList = [];
      if (this.dataList && this.dataList.length > 0) {
        this.dataList.map((item) => {
          var itemObj = {
            value: item,
            text: item,
          };
          _this.newList.push(itemObj);
        });
      }
      _this.checkedAll = false;
      if (_this.newList && _this.newList.length > 0) {
        _this.searchList = _this.newList;
      } else {
        _this.searchList = [];
      }
    },
  },
  created() {
    this.token = localStorage.getItem("tokenKey");
    this.debouncedInput = debounce(this.handleSearchInput, 1000, {
      leading: false,
      trailing: true,
    }); //防抖
  },
};
</script>

<style lang="less" scoped>
.wapper,
.value {
  width: 100%;
  height: 100%;
  text-align: center;
}
.search-wapper {
  height: 100%;
  display: flex;
  flex-direction: column;

  & > div:last-of-type {
    height: 0;
    flex: 1;
    overflow-y: hidden;
    // -webkit-overflow-scrolling: touch;
    /deep/.van-cell-group {
      height: 100%;
      overflow-y: auto;
    }
  }
  /deep/.van-picker__cancel {
    color: #1e9fff;
  }
  /deep/.van-picker__confirm {
    color: #1e9fff;
  }
  /deep/.van-picker__toolbar {
    white-space: nowrap;
  }
}
/deep/.van-cell {
  justify-content: space-between;
}
/deep/.van-cell__title {
  flex: inherit;
}
/deep/.van-checkbox {
  width: 5% !important;
}
</style>